<script setup>
import { ref } from "vue";
import LeftPanel from "./form-design/left-panel.vue";
import ContentPanel from "./form-design/content-panel.vue";
import RightPanel from "./form-design/right-panel.vue";
import PreviewForm from "./form-design/modals/preview-form.vue";
//const list = ref([]);
import { toRefs } from "vue";
import { useStore } from "vuex";
const currentItem = ref({});
const props = defineProps({
  list: {
    type: Array,
    default: "",
  },
});
const { list } = toRefs(props);
const previewVisible = ref(false);
const store = useStore();
const currentIndex = ref(0);
const dialogVisible = ref(false);
const currentTitle = ref("");
const headerData = ref([
  {
    title: "预览",
    // href: useGetImageUrl('preview.svg'),
  },
  {
    title: "清空",
    // href: useGetImageUrl('clean.svg'),
  },
  {
    title: "导入JSON",
    // href: useGetImageUrl('import.svg'),
  },
  {
    title: "生成JSON",
    // href: useGetImageUrl('json.svg'),
  },
]);

// 点击功能
const itemClick = (index) => {
  if (index === 0) {
    // 预览操作
    previewVisible.value = true;

    return;
  }
  if (index === 1) {
    currentItem.value = {};
    // 清空操作
    store.dispatch("form/updateConfig", []);
    return;
  } else {
    currentIndex.value = index;
    dialogVisible.value = true;
  }
};

/* 事件处理区域 */
const currentItemClick = (item) => {
  console.log("currentItemClick--------------?", JSON.stringify(item));
  currentItem.value = item;
};
</script>

<template>
  <div class="form">
    <header>
      <el-button
        v-for="(item, index) in headerData"
        :key="item.title"
        type="primary"
        text
        @click="itemClick(index)"
      >
        <!-- <img v-if="item.href" class="icon" :src="item.href" alt="" /> -->
        <span>{{ item.title }}</span>
      </el-button>
    </header>
    <section style="background-color: #f2f3f5;">
      
      <LeftPanel @click-add="add" />
      <ContentPanel
        :list="list"
        @current-item-click="currentItemClick"
        :add-current-index="currentIndex"
      />
      <RightPanel :current-item="currentItem" />
    </section>
    <!-- 预览表单设计 -->
    <PreviewForm
      :visible="previewVisible"
      @cancel="previewVisible = false"
    /><!-- 生成JSON -->
  </div>
</template>

<style lang="less" scoped>
.form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;

  header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px;
    width: 100%;
    height: 64px;
    border: 2px solid #f5f5f5;
    background: #fff;

    .icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }

  section {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
  }
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
